<template>
  <div class="PersonalHomePage" v-if="UserInformation.profile">
    <div class="title" @click="JumpToHomePage">
      <span class="iconfont icon-xiangzuo"></span>首页
    </div>
    <div
      class="Backgroundpicture"
      :style="
        'background-image:url(' + UserInformation.profile.backgroundUrl + ')'
      "
    ></div>
    <div class="UserInformation">
      <div class="headPortrait">
        <div>
          <div
            class="AvatarFrame"
            :style="
              'background-image:url(' + UserInformation.profile.avatarUrl + ')'
            "
          ></div>
        </div>
        <div>{{ UserInformation.profile.nickname }}</div>
        <div class="follow">
          <span>{{ UserInformation.profile.follows }}关注</span>I<span
            >{{ UserInformation.profile.allSubscribedCount }}粉丝</span
          >I<span>Lv.{{ UserInformation.level }}</span>
        </div>
      </div>
      <div class="MusicApplication">
        <div class="ApplicationList">
          <div @click="Recentlyplayed">
            <p class="iconfont icon-bofang"></p>
            最近播放
          </div>
          <div @click="Localdownload">
            <p class="iconfont icon-yunxiazai_o"></p>
            本地/下载
          </div>
          <div @click="GoodFriends">
            <p class="iconfont icon-peoples"></p>
            我的好友
          </div>
          <div>
            <p class="iconfont icon-xinhao" @click="iconxinhao"></p>
            我的播客
          </div>
        </div>
      </div>
      <div class="CreateSongList">
        <div>主页</div>
        <div>动态</div>
        <div>播客</div>
      </div>
      <div class="CreateASongList">
        <div @click="JumpToHomePage"><p>唱片收藏架表达音乐品味</p></div>
        <div @click="iconxinhao">
          <p>上传图片让别人了解你</p>
        </div>
        <div @click="iconxinhao">
          <p>大声说出你的愿望</p>
        </div>
      </div>
      <van-tabs @click="onClick">
        <van-tab title="我的喜欢">
          <div class="rankings">
            <div v-for="item in playlist" :key="item.id">
              <router-link :to="'/ranking/rankinglist?id=' + item.id">
                <img :src="item.coverImgUrl" alt="" />
              </router-link>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="我的关注">
          <div class="Comment-content">
            <div
              v-for="(item, index) in follow"
              :key="index"
              class="CommentMusic"
            >
              <div
                class="backgroundImage"
                :style="'background-image: url(' + item.avatarUrl + ')'"
              ></div>
              <div class="nickname">
                <h1>{{ item.nickname }}</h1>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="LogOut" @click="LogOut">退出登录</div>
    </div>
  </div>
</template>

<script>
import { getUserDetail } from "../api/signin";
import {
  getUserrecord,
  getUserFollows,
  getUserPlaylist,
} from "../api/recommend";
import { Toast } from "vant";

export default {
  data() {
    return {
      UserInformation: null,
      Userrecord: null,
      follow: null,
      playlist: null,
    };
  },
  created() {
    getUserDetail({ uid: window.localStorage.uid }).then((data) => {
      this.UserInformation = data;
    });
    getUserrecord({ uid: window.localStorage.uid }).then((data) => {
      this.Userrecord = data.allData;
    });
    getUserFollows({ uid: window.localStorage.uid }).then((data) => {
      this.follow = data.follow;
    });
    getUserPlaylist({ uid: window.localStorage.uid }).then((data) => {
      this.playlist = data.playlist;
    });
  },
  methods: {
    Localdownload() {
      this.$router.push("/userinfo/LocalDownload");
    },
    onClick(name, title) {
      Toast(title);
    },
    LogOut() {
      this.$router.push("/Signin");
      localStorage.clear();
    },
    GoodFriends() {
      this.$router.push("/userinfo/GoodFriend");
    },
    JumpToHomePage() {
      this.$router.push("/recommend");
    },
    Recentlyplayed() {
      this.$router.push("/userinfo/RecentlyPlayed");
    },
    iconxinhao() {
      this.$router.push("/podcast");
    },
  },
};
</script>

<style lang="less">
.PersonalHomePage {
  width: 100%;
  padding-bottom: 50px;

  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }
  .UserInformation {
    position: absolute;
    top: 28%;
    width: 100%;
    .rankings {
      width: 96%;
      margin: 10px auto;
      div {
        display: flex;
        align-items: center;
        a {
          margin: 2%;
          img {
            border-radius: 10px;
            width: 90px;
            height: 90px;
          }
        }
      }
    }
    .Comment-content {
      width: 100%;
      padding-bottom: 8%;
      .CommentMusic {
        margin-top: 10px;
        width: 95%;
        padding-left: 3%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .backgroundImage {
          width: 38px;
          height: 38px;
          background-size: 100%;
          border-radius: 50%;
          margin-right: 2%;
        }
        .nickname {
          flex: 1;
          color: #838383;
          h1 {
            padding: 0;
          }
        }
        h1 {
          font-size: 14px;
        }
        h2 {
          font-size: 8px;
        }
        .give-the-thumbs-up {
          position: relative;
          padding-right: 5%;
          line-height: 12px;
          font-size: 12px;
          color: #838383;
          span {
            position: absolute;
            right: -2%;
            color: #838383;
          }
          .iconfontred {
            color: red;
          }
        }
        .content {
          margin-top: 1%;
          width: 88%;
          margin-left: 12%;
          font-size: 14px;
          border-bottom: 1px solid #838383;
          padding-bottom: 2%;
        }
      }
    }
    .icondiepian {
      width: 80%;
      margin: 3% auto;
      border: 1px solid #a3a3a3;
      border-radius: 10px;
      line-height: 30px;
      padding: 10px;
      span {
        font-size: 30px;
        padding: 0px 10px;
        color: #a3a3a3;
      }
    }
    .headPortrait {
      width: 96%;
      height: 15%;
      margin: 0 auto 0 auto;
      background-color: #f5f5f5;
      border-radius: 10px;
      div {
        width: 40%;
        margin: 0 auto;
        position: relative;
        text-align: center;
        height: 45px;
        .AvatarFrame {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          margin: 0 auto;
          position: absolute;
          top: -45px;
          left: 0;
          right: 0;
          background-size: 100%;
        }
        &:nth-child(2) {
          height: auto;
          font-size: 20px;
          font-weight: 700;
        }
      }
      .follow {
        display: flex;
        justify-content: space-between;
        color: #969696;
        align-items: baseline
      }
    }
    .MusicApplication {
      width: 96%;
      margin: 20px auto;
      background-color: #f5f5f5;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
      .ApplicationList {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border-bottom: 1px solid #f5f5f5;
        div {
          margin: 10px 0;
          p {
            font-size: 40px;
            color: #ff5c60;
            padding: 5px 0;
          }
        }
      }
      h1 {
        font-size: 14px;
        padding: 14px 0;
      }
    }
    .CreateSongList {
      width: 96%;
      margin: 10px auto;
      display: flex;
      justify-content: space-around;
      font-weight: 600;
    }
    .CreateASongList {
      width: 96%;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      div {
        width: 25%;
        height: 10vh;
        background-color: #f5f5f5;
        border-radius: 10px;
        padding: 18px 12px;
        color: #707070;
        font-size: 14px;
      }
    }
  }

  .LogOut {
    width: 50%;
    margin: 5% auto;
    margin-top: 5%;
    text-align: center;
    padding: 3% 0;
    border: 1px solid rgb(165, 165, 165);
    border-radius: 50px;
    color: red;
  }
  .Backgroundpicture {
    width: 100%;
    height: 32vh;
    position: absolute;
    top: 0px;
    background-size: 100%;
    z-index: -1;
  }
}
</style>